<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 火灾调查知识库平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <style>
        .fire-red {
            background-color: #e63946;
        }
        .login-bg {
            background-image: url('https://img.freepik.com/free-photo/firefighters-action_23-2149128966.jpg');
            background-size: cover;
            background-position: center;
            position: relative;
        }
        .login-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1;
        }
        .login-content {
            position: relative;
            z-index: 2;
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <div id="app">
        <div class="flex min-h-screen">
            <!-- 左侧背景图区域 -->
            <div class="hidden md:block md:w-1/2 login-bg">
                <div class="login-content h-full flex flex-col justify-center px-12">
                    <h2 class="text-3xl font-bold text-white mb-6">加入火灾调查知识库平台</h2>
                    <p class="text-xl text-white opacity-90 mb-8">
                        注册成为会员，获取更多专业资源和个性化服务
                    </p>
                    <div class="space-y-4">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center mr-4">
                                <i class="fas fa-book-open text-white"></i>
                            </div>
                            <p class="text-white">免费访问核心知识资源</p>
                        </div>
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center mr-4">
                                <i class="fas fa-cloud-download-alt text-white"></i>
                            </div>
                            <p class="text-white">资料收藏与下载</p>
                        </div>
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center mr-4">
                                <i class="fas fa-users text-white"></i>
                            </div>
                            <p class="text-white">参与专业交流与讨论</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 右侧注册表单区域 -->
            <div class="w-full md:w-1/2 flex items-center justify-center p-8">
                <div class="max-w-md w-full">
                    <div class="text-center mb-10">
                        <a href="index.html" class="inline-block">
                            <img src="https://img.icons8.com/color/48/000000/fire-element.png" alt="Logo" class="h-12 w-12 mx-auto">
                        </a>
                        <h1 class="mt-4 text-3xl font-bold text-gray-800">注册账号</h1>
                        <p class="mt-2 text-gray-600">火灾调查知识库平台</p>
                    </div>
                    
                    <div class="bg-white rounded-xl shadow-md p-8">
                        <form>
                            <div class="mb-6">
                                <label class="block text-gray-700 text-sm font-medium mb-2">用户名</label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-user text-gray-400"></i>
                                    </div>
                                    <input type="text" class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500" placeholder="请设置用户名">
                                </div>
                                <p class="mt-1 text-xs text-gray-500">用户名长度为4-16个字符，支持中文、字母、数字</p>
                            </div>
                            
                            <div class="mb-6">
                                <label class="block text-gray-700 text-sm font-medium mb-2">手机号码</label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-mobile-alt text-gray-400"></i>
                                    </div>
                                    <input type="tel" class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500" placeholder="请输入手机号码">
                                </div>
                            </div>
                            
                            <div class="mb-6">
                                <label class="block text-gray-700 text-sm font-medium mb-2">验证码</label>
                                <div class="flex space-x-2">
                                    <div class="relative flex-1">
                                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                            <i class="fas fa-shield-alt text-gray-400"></i>
                                        </div>
                                        <input type="text" class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500" placeholder="请输入验证码">
                                    </div>
                                    <button type="button" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 focus:outline-none whitespace-nowrap">
                                        获取验证码
                                    </button>
                                </div>
                            </div>
                            
                            <div class="mb-6">
                                <label class="block text-gray-700 text-sm font-medium mb-2">设置密码</label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-lock text-gray-400"></i>
                                    </div>
                                    <input type="password" class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500" placeholder="请设置密码">
                                </div>
                                <p class="mt-1 text-xs text-gray-500">密码长度为8-20个字符，必须包含字母和数字</p>
                            </div>
                            
                            <div class="mb-6">
                                <label class="block text-gray-700 text-sm font-medium mb-2">确认密码</label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-lock text-gray-400"></i>
                                    </div>
                                    <input type="password" class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500" placeholder="请再次输入密码">
                                </div>
                            </div>
                            
                            <div class="flex items-center mb-6">
                                <input type="checkbox" id="agree" class="h-4 w-4 text-red-600 focus:ring-red-500 border-gray-300 rounded">
                                <label for="agree" class="ml-2 block text-sm text-gray-700">
                                    我已阅读并同意<a href="#" class="text-red-600 hover:text-red-700">《用户协议》</a>和<a href="#" class="text-red-600 hover:text-red-700">《隐私政策》</a>
                                </label>
                            </div>
                            
                            <button type="submit" class="w-full py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 font-medium">
                                立即注册
                            </button>
                        </form>
                        
                        <div class="mt-6 text-center">
                            <p class="text-sm text-gray-600">
                                已有账号？ <a href="login.html" class="text-red-600 hover:text-red-700 font-medium">立即登录</a>
                            </p>
                        </div>
                    </div>
                    
                    <div class="mt-8 text-center">
                        <a href="index.html" class="text-sm text-gray-600 hover:text-gray-800">
                            <i class="fas fa-arrow-left mr-1"></i> 返回首页
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Vue初始化代码
        const app = Vue.createApp({
            data() {
                return {
                    // 数据
                }
            },
            methods: {
                // 方法
            }
        });
        app.use(ElementPlus);
        app.mount('#app');
    </script>
</body>
</html> 